<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/courseList/package' }"> <i class="el-icon-lx-cascades"></i> 专栏列表 </el-breadcrumb-item>
                <el-breadcrumb-item>[{{ title }}] 专栏内容管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-button type="primary" class="handle-del mr10" @click="addDialog">添加课程</el-button>
            <!-- <el-button type="primary" class="handle-del mr10" @click="addExamDialog">新建课程</el-button> -->
            <!-- <el-button type="primary" class="handle-del mr10" @click="addExamDialog">添加考试</el-button> -->
            <div class="handle-box">
                <el-input v-model="query.keyword" placeholder="输入课程名称" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column label="课程封面">
                    <template slot-scope="scope">
                        <img :src="scope.row.cover" alt="" class="info-image" />
                    </template>
                </el-table-column>
                <el-table-column prop="type" label="课程类型">
                    <template slot-scope="scope">
                        {{
                            scope.row.type == 'video'
                                ? '视频'
                                : scope.row.type == 'audio'
                                ? '音频'
                                : scope.row.type == 'exam'
                                ? '试卷'
                                : '图文'
                        }}
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="课程名称"></el-table-column>
                <el-table-column prop="description" label="课程描述"></el-table-column>
                <el-table-column label="免费/付费">
                    <template slot-scope="scope">
                        <span style="color: #e65c5c">{{ scope.row.price == 0 ? '免费' : '¥ ' + scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="f_view" label="浏览量"></el-table-column>
                <el-table-column prop="f_sales" label="订阅量"></el-table-column>
                <el-table-column prop="f_favorites" label="收藏量"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-row>
                            <!-- <el-button @click="preview" type="primary" size="mini">排序</el-button>
                            <el-button @click="edit(scope.row.id, scope.row)" type="success" size="mini">编辑</el-button>
                            <el-button @click="putOn(scope.row.id, scope.row.status)" type="warning" size="mini">{{
                                scope.row.status == 0 ? '上架' : '下架'
                            }}</el-button> -->
                            <el-button @click="deleteRow(scope.row.id, scope.$index)" type="danger" size="mini">移出专栏</el-button>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.page"
                    :page-size="query.rows"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
        <!-- 添加课程弹出框 -->
        <el-dialog title="添加课程" @close="cancel" :visible.sync="showDialog" width="50%">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item>
                    <el-button type="primary" class="handle-del mr10" @click="addExamDialog">新建课程</el-button>
                    <el-select v-model="addColumn.type" style="margin-right: 20px">
                        <el-option v-for="item in courseType" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                    <el-input v-model="addColumn.keyword" placeholder="输入课程名称" class="handle-input mr10"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="addColumnSearch">搜索</el-button>
                    
                </el-form-item>
                <el-table
                    :data="columnTableData"
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column label="课程封面">
                        <template slot-scope="scope">
                            <img :src="scope.row.cover" alt="" class="info-image" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="课程名称"></el-table-column>
                    <el-table-column label="免费/付费">
                        <template slot-scope="scope">
                            <span style="color: #e65c5c">{{ scope.row.price == 0 ? '免费' : '¥ ' + scope.row.price }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="课程类型">
                        <template slot-scope="scope">
                            {{ scope.row.type == 'video' ? '视频' : scope.row.type == 'audio' ? '音频' : '图文' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="课程状态">
                        <template slot-scope="scope">
                            {{ scope.row.status == 0 ? '未上架' : '已上架' }}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="addColumn.page"
                        :page-size="addColumn.rows"
                        :total="columnPageTotal"
                        @current-change="columnPageChange"
                    ></el-pagination>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 添加考试弹出框 -->
        <el-dialog title="课程分类" @close="cancel" :visible.sync="showExamDialog" width="50%">
            <div class="tj_box">
                <div class="tj_center" @click="tonewweb('/article')">图文</div>
                <div class="tj_center" @click="tonewweb('/audio')">音频</div>
                <div class="tj_center" @click="tonewweb('/video')">视频</div>
            </div>
            <!-- <el-form ref="examform" :model="examform" label-width="100px">
                <el-form-item>
                    <el-input v-model="addExam.keyword" placeholder="输入试卷名称" class="handle-input mr10"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="addExamSearch">搜索</el-button>
                </el-form-item>
                <el-table
                    :data="examTableData"
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column label="课程封面">
                        <template slot-scope="scope">
                            <img :src="scope.row.cover" alt="" class="info-image" />
                        </template>
                    </el-table-column>
                    <el-table-column prop="title" label="试卷名称"></el-table-column>
                    <el-table-column label="免费/付费">
                        <template slot-scope="scope">
                            <span style="color: #e65c5c">{{ scope.row.price == 0 ? '免费' : '¥ ' + scope.row.price }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" label="课程类型">
                        <template slot-scope="scope">
                            {{ scope.row.type='试卷' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="课程状态">
                        <template slot-scope="scope">
                            {{ scope.row.status == 0 ? '未上架' : '已上架' }}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="addExam.page"
                        :page-size="addExam.rows"
                        :total="examPageTotal"
                        @current-change="examPageChange"
                    ></el-pagination>
                </div>
            </el-form> -->
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </span> -->
        </el-dialog>
    </div>
</template>

<script>
import merge from 'webpack-merge';
import { classifyListData, videoListData, addVideoData, manageColumnData, examListData, keListData, searchKE } from '../../api/index';
export default {
    name: 'columnManage',
    data() {
        return {
            query: {
                have_ids: '',
                page: Number(localStorage.getItem('lastpage') ? localStorage.getItem('lastpage') : 1),
                rows: 4,
                keyword: ''
            },
            knowquery: {
                have_ids: '',
                page: 1,
                rows: 4,
                keyword: ''
            },
            examquery: {
                have_ids: '',
                page: 1,
                rows: 4,
                keyword: ''
            },
            type: '',
            courseType: [
                {
                    value: '',
                    label: '全部类型'
                },
                {
                    value: 'image_text',
                    label: '图文'
                },
                {
                    value: 'audio',
                    label: '音频'
                },
                {
                    value: 'video',
                    label: '视频'
                }
            ],

            form: {
                type: 'column',
                id: '',
                title: '',
                description: '',
                cover: '',
                category_id: '',
                only_member: '',
                alone_sale: '',
                expense: '',
                price: '',
                marking_price: '',
                score: '',
                f_view: '',
                f_sales: '',
                f_favorites: '',
                sort: '',
                status: ''
            },
            examform: {
                id: '',
                title: '',
                cover: '',
                price: '',
                status: ''
            },
            addColumn: {
                type: '',
                page: 1,
                rows: 4,
                keyword: '',
                not_have_ids: ''
            },
            addExam: {
                page: 1,
                rows: 4,
                keyword: '',
                not_have_ids: ''
            },
            options: [],
            // options_child: [],
            tableData: [],
            columnTableData: [],
            examTableData: [],
            multipleSelection: '',
            delList: [],
            showDialog: false,
            showExamDialog: false,
            pageTotal: 0,
            columnPageTotal: 0,
            examPageTotal: 0,
            title: localStorage.getItem('title') ? localStorage.getItem('title') : '',
            ids: '',
            column_id: localStorage.getItem('column_id') ? localStorage.getItem('column_id') : ''
        };
    },
    created() {
        this.getData();
    },
    methods: {
        tonewweb(path){
            console.log(path)
            this.$router.push(path);
        },
        getData() {
            this.ids = localStorage.getItem('moreids') ? localStorage.getItem('moreids') : '';
            this.query.have_ids = this.ids;
            let idsarr = this.ids.split(',');
            var knowledgearr = [];
            var examarr = [];
            for (let item of idsarr) {
                if (item.indexOf('exam_') != -1) {
                    examarr.push(item.replace('exam_', ''));
                } else {
                    knowledgearr.push(item);
                }
            }
            this.knowquery.have_ids = this.addColumn.not_have_ids = knowledgearr.join();
            this.examquery.have_ids = this.addExam.not_have_ids = examarr.toString();
            keListData(this.query).then((res) => {
                this.tableData = res.data.list;
                this.pageTotal = res.data.count;
            });
        },
        // 多选操作
        handleSelectionChange(val) {
            let knowledge_ids = [];
            val.forEach((item) => {
                knowledge_ids.push(item.id);
                this.multipleSelection = knowledge_ids.join(',');
            });
        },
        // 搜索
        handleSearch() {
            searchKE(this.query).then((res) => {
                console.log(res);
                this.tableData = res.data.list;
                this.pageTotal = res.data.count;
            });
        },
        //添加课程
        addDialog() {
            this.showDialog = true;
            this.getTableData();
        },
        //添加考试
        addExamDialog() {
            this.showExamDialog = true;
            this.getExamTableData();
        },
        addColumnSearch() {
            this.getTableData();
        },
        addExamSearch() {
            this.getExamTableData();
        },
        //编辑
        // edit(id, row) {
        //     classifyListData().then((res) => {
        //         this.options = res.data.list;
        //     });

        //     this.showDialog = true;
        //     this.form = row;
        //     this.form.id = id;
        //     if (row.cover) {
        //         this.pictureList.push({
        //             url: row.cover
        //         });
        //     }
        // },
        //上下架没用
        // putOn(id, status) {
        //     this.$confirm(`确定${status == 0 ? '上架' : '下架'}吗！`, '提示', {
        //         type: 'warning'
        //     }).then(() => {
        //         addVideoData({ id: id, status: status == 0 ? 1 : 0 }).then((res) => {
        //             if (res.code == 1) {
        //                 this.$message.success('成功');
        //                 this.query.have_ids = this.addColumn.not_have_ids = this.ids;
        //                 this.getData();
        //                 this.$router.push({name:"columnManage",query: merge(this.$route.query, { ids: res.data.knowledge_ids })});
        //             }
        //         });
        //     });
        // },
        //移出专栏
        deleteRow(id, index) {
            // 二次确认删除
            this.$confirm('确定要移出吗？', '提示', {
                type: 'warning'
            }).then(() => {
                manageColumnData({ type: 'del', column_id: this.column_id, knowledge_id: id }).then((res) => {
                    console.log(res);
                    if (res.code == 1) {
                        this.tableData.splice(index, 1);
                        //this.$set(this.query,'have_ids',res.data);
                        localStorage.setItem('moreids', res.data.knowledge_ids);
                        localStorage.setItem('lastpage', this.query.page);
                        //this.getData();
                        this.$message.success('移出成功');
                        this.getData();
                    } else {
                        this.$message.success('移出失败');
                    }
                });
            });
        },
        //取消
        cancel() {
            this.showDialog = false;
            // location.reload();
        },
        //确定
        save() {
            this.$confirm('确定要添加吗？', '提示', {
                type: 'warning'
            }).then(() => {
                manageColumnData({ type: 'add', column_id: this.column_id, knowledge_id: this.multipleSelection }).then((res) => {
                    if (res.code == 1) {
                        this.showDialog = false;
                        //this.$set(this.query,'have_ids',res.data.knowledge_ids);
                        localStorage.setItem('moreids', res.data.knowledge_ids);
                        let lastpage = Math.ceil(this.pageTotal / this.query.rows);
                        localStorage.setItem('lastpage', lastpage);
                        //console.log(localStorage.getItem('moreids'));
                        //this.getData();
                        this.$message.success('添加成功');
                        this.query.have_ids = this.addColumn.not_have_ids = this.ids;
                        this.getData();
                    } else {
                        this.$message.success('添加失败');
                    }
                });
            });
        },
        // 分页
        handlePageChange(val) {
            this.$set(this.query, 'page', val);
            this.getData();
        },
        //添加课程分页
        columnPageChange(val) {
            this.$set(this.addColumn, 'page', val);
            this.getTableData();
        },
        //添加考试分页
        examPageChange(val) {
            this.$set(this.addExam, 'page', val);
            this.getExamTableData();
        },
        getTableData() {
            //得到可添加的视频列表
            //console.log(this.addColumn);
            videoListData(this.addColumn).then((res) => {
                console.log(res);
                this.columnTableData = res.data.list;
                this.columnPageTotal = res.data.count;
            });
        },
        getExamTableData() {
            examListData(this.addExam).then((res) => {
                console.log(res);
                this.examTableData = res.data.list;
                for (let item of this.examTableData) {
                    item['id'] = 'exam_' + item['id'];
                }
                //console.log(this.examTableData);
                this.examPageTotal = res.data.count;
            });
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
    float: right;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}

.info-image {
    height: 64px;
    width: 80px;
    border-radius: 4px;
}
.showPay {
    width: 150px;
    margin-right: 10px;
    margin-bottom: 15px;
}
.el-upload--text {
    border: 0;
    height: 40px;
    text-align: left;
    overflow: unset;
}
.el-upload__tip {
    margin-top: 0;
}
.tj_box{
    display: flex;
   justify-content: space-around;
}
.tj_center{
        width: 100px;
        height:80px;
        border-radius: 10%;
        text-align: center;
        line-height: 80px;
        background-color: pink;
        color: #FFF;
    }
</style>



